<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <!--      @tab-click="handleClick"-->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane :label="item.name" :name="item.id.toString()" v-for="item in statusLine"
                     :key="item.id"></el-tab-pane>
      </el-tabs>
      <div class="toplineBox mb-10">
        <div class="toplineBox-left">
          <el-input v-model="searchForm.name" placeholder="申请人" class="mr-5 w-80" size="small"></el-input>
          <!--          <el-select v-model="searchForm.status" placeholder="请假状态" class="mr-5 w-100" size="small">-->
          <!--            <el-option-->
          <!--                v-for="item in statusLine"-->
          <!--                :key="item.id"-->
          <!--                :label="item.name"-->
          <!--                :value="item.id">-->
          <!--            </el-option>-->
          <!--          </el-select>-->
          <el-select v-model="searchForm.type" placeholder="请选择时间类型" class="mr-5 w-200" size="small">
            <el-option
              v-for="item in typeLine"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-select v-model="searchForm.is_substitute" placeholder="选择是否代班" class="mr-5 w-200" size="small">
            <el-option
              v-for="item in substitute"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <el-date-picker
            v-model="timeData"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            size="small"
            class="mr-5">
          </el-date-picker>
          <el-button @click="searchFn(1)" plain type="primary" size="small">搜索
          </el-button>
          <el-button @click="searchFn(2)" plain size="small">重置
          </el-button>
          <!--          <downexcel type="staffServiceExamine"></downexcel>-->
        </div>
      </div>
      <!--本体列表，数据 -->
      <el-table
        ref="multipleTable"
        :data="arryList"
        :stripe="tableStripe"
        :border="tableBorder"
        tooltip-effect="dark"
        style="width: 100%"
        header-cell-class-name="table-text-c"
        cell-class-name="table-text-c">
        <!--        <el-table-column-->
        <!--            label="ID"-->
        <!--            align="center"-->
        <!--            prop="id"-->
        <!--            width="80">-->
        <!--        </el-table-column>-->
        <el-table-column
          prop="pic"
          label="请假类型"
          align="center"
          width="90"
        >
          <template slot-scope="scope">
            {{ scope.row.cate ? scope.row.cate.name : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="pic"
          label="请假时间"
          align="center"
          width="320"
        >
          <template slot-scope="scope">
            {{ scope.row.start_time }}至{{ scope.row.end_time }}
          </template>
        </el-table-column>
        <el-table-column
          prop="day"
          label="时长"
          align="center"
          width="90"
        >
          <template slot-scope="scope">
            {{ scope.row.day }}{{ scope.row.cate.time_type == 2 ? '小时' : '天' }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请时间"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            {{ scope.row.create_time || '' }}
          </template>
        </el-table-column>
        <el-table-column
          label="申请人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.user ? scope.row.user.realname : '' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="content"
          label="请假事由"
          align="center"
        />
        <el-table-column
          label="审批人"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.examine_user ? scope.row.examine_user.realname : '' }}
          </template>
        </el-table-column>
        <el-table-column
          label="审批时间"
          align="center"
          width="160"
        >
          <template slot-scope="scope">
            {{ scope.row.examine_time || '' }}
          </template>
        </el-table-column>
        <el-table-column
          label="代班"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            {{ scope.row.is_substitute ? '需要' : '不需要' }}
          </template>
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          width="80"
        >
          <template slot-scope="scope">
            <span :style="{'color': statusLineColor[scope.row.status]}">{{ statusLineState[scope.row.status] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" align="left" fixed="right">
          <template slot-scope="scope">
            <!--            v-if="scope.row.status"-->
            <el-button plain size="mini" @click="detailId=scope.row.id,detailVisible=true">详情
            </el-button>
            <!--              v-if="!scope.row.status"-->
            <el-button @click="handleCheckCanle(scope.row)" plain type="primary" size="mini"
                       v-if="scope.row.status==5">确认取消
            </el-button>
            <el-button @click="handleCheck(scope.row,1)" plain type="primary" size="mini"
                       v-if="scope.row.showExamine && !scope.row.status">通过
            </el-button>
            <el-button @click="handleCheck(scope.row,2)" plain type="danger" size="mini"
                       v-if="scope.row.showExamine && !scope.row.status">
              驳回
            </el-button>
            <el-button size="mini" type="danger" plain @click="handleDetel(scope.row)" v-if="scope.row.showExamine">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--工具条-->
      <el-col :span="24" class="toolbar">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :total="page.total"
          :page-size="page.pagesize"
          @current-change="handleSizeChange">
        </el-pagination>
      </el-col>
    </div>
    <addUser :visible.sync="addVisible" @InitFn="InitFn"></addUser>
    <detailLeave :visible.sync="detailVisible" :detailId="detailId"></detailLeave>
  </div>
</template>

<script>
import {pagination} from '@/utils/util.js'
import addUser from "./addUser";
import {leaveIndex, leaveAdpot, leaveReject, leaveCancel_examine, leaveDelete} from '@/api/admin/staffService'
import detailLeave from "./detailLeave";
import {mapGetters} from "vuex";

export default {
  components: {
    addUser,
    detailLeave
  },
  data() {
    return {
      activeName: 'all',
      detailVisible: false,
      detailId: 0,
      addVisible: false,
      tableStripe: true, // 是否斑马栏
      tableBorder: true, // 单元格右边边框
      arryList: [], // 数据列表
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      timeData: [],
      searchForm: {
        p: 1,
        style: 1, // 1 审核 2 我的
        type: null, // 1 今天 2 月 3 学期
        name: null,
        status: null,
        start_time: null,
        end_time: null,
        is_substitute: 99
      },
      statusLineState: {
        0: '待审批',
        1: '通过',
        2: '驳回',
        3: '请假中',
        4: '已完成',
        5: '取消中',
        6: '已取消'
      },
      statusLineColor: {
        0: '#f44336',
        1: 'rgb(0 199 5)',
        2: '#f44336',
        3: 'rgb(207 122 0)',
        4: 'rgb(0 199 5)',
        5: '#f44336',
        6: 'rgb(0 199 5)',
      },
      substitute: [
        {
          id: 99,
          name: '全部'
        },
        {
          id: 0,
          name: '不需要代班'
        },
        {
          id: 1,
          name: '需要代班'
        },
      ],
      statusLine: [
        {
          id: 'all',
          name: '全部'
        },
        {
          id: 0,
          name: '待审批'
        },
        {
          id: 1,
          name: '通过'
        },
        {
          id: 2,
          name: '驳回'
        },
        {
          id: 3,
          name: '请假中'
        },
        {
          id: 4,
          name: '已完成'
        },
        {
          id: 5,
          name: '取消中'
        },
        {
          id: 6,
          name: '已取消'
        }
      ],
      typeLine: [
        {
          id: 1,
          name: '今日'
        },
        {
          id: 2,
          name: '本月度'
        },
        {
          id: 3,
          name: '本学期'
        }
      ],
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  watch: {
    activeName() {
      console.log('变了')
      this.searchFn(2)
    }
  },
  created() {
    this.InitFn()
  },
  methods: {
    // 初始化
    async InitFn() {
      let data_ = JSON.parse(JSON.stringify(this.searchForm))
      if (data_.is_substitute === 99) {
        delete data_.is_substitute
      }
      data_.p = this.page.pageindex
      leaveIndex(data_).then(res => {
        console.log('res:', res)
        for (let item of res.list.data) {
          if (item.examine_user && item.examine_user.id === this.userInfo.id) {
            item.showExamine = true
          }
        }
        this.arryList = res.list.data
        this.page.total = res.list.total
      })
    },
    // index分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    adduser() {

    },
    // 删除教具
    handleCheck(item, type) {
      let that = this
      if (type === 1) {
        this.$confirm(`确认通过【${item.user.realname}】的请假申请, 是否继续?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.leaveRespon(type, item)
        }).catch(() => {
        })
      } else {
        this.$prompt(`驳回【${item.user.realname}】的请假申请，驳回理由`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({value}) => {
          if (value) {
            that.leaveRespon(type, item, value)
          } else {
            that.$message.error('未填写驳回理由')
          }
        }).catch(() => {
        })
      }

    },
    leaveRespon(type, item, content) {
      if (type === 1) {
        leaveAdpot({id: item.id}).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.InitFn()
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        leaveReject({id: item.id, reject_content: content}).then(res => {
          if (!res.code) {
            this.$message.success(res.msg)
            this.InitFn()
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },
    handleCheckCanle(item) {
      let that = this
      this.$confirm(`确认【${item.user.realname}】该请假单取消, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.leaveCanleFn(item)
      }).catch(() => {
      })
    },
    leaveCanleFn(item) {
      leaveCancel_examine({id: item.id}).then(res => {
        if (!res.code) {
          this.$message.success(res.msg)
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    searchFn(e) {
      this.searchForm.status = null
      if (this.activeName !== 'all') {
        this.searchForm.status = this.activeName
      } else {
        this.searchForm.status = null
      }
      if (e === 2) {
        this.timeData = ''
        this.searchForm.type = null
        this.searchForm.name = null
      } else {
        this.searchForm.start_tiem = this.timeData ? this.timeData[0] : null
        this.searchForm.end_time = this.timeData ? this.timeData[1] : null
      }
      this.page.pageindex = 1
      this.InitFn()
    },
    // 删除
    handleDetel(item) {
      this.$confirm(`确认删除申请人【${item.user ? item.user.realname : ''}】请假, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detelRespon(item)
      }).catch(() => {
      })
    },
    detelRespon(item) {
      leaveDelete({id: item.id}).then(res => {
        if (!res.code) {
          this.$message.success('操作成功！')
          this.InitFn()
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  },
  mounted() {
  }
}
</script>


